<template>
  <div>
    <!-- 查询表单 -->
    <el-form :inline="true" :model="searchForm" class="filter-form">
      <el-form-item label="一级科室">
        <el-select v-model="searchForm.campusId" placeholder="请选择" clearable>
          <el-option v-for="item in campusList" :key="item.campusId" :label="item.campusName" :value="item.campusId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级科室">
        <el-select v-model="searchForm.categoryId" placeholder="请选择" clearable>
          <el-option v-for="item in categoryList" :key="item.categoryId" :label="item.categoryName" :value="item.categoryId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="searchForm.status" placeholder="请选择" clearable>
          <el-option label="全部" :value="''"></el-option>
          <el-option label="启用" :value="1"></el-option>
          <el-option label="禁用" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="searchForm.dateRange"
          type="daterange"
          range-separator="—"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchList">查询</el-button>
        <el-button type="success" @click="handleAdd">新增</el-button>
      </el-form-item>
    </el-form>

    <!-- 树形表格 -->
    <el-table
      :data="tableData"
      row-key="deptId"
      border
      style="width: 100%; margin-top: 20px;"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      default-expand-all
    >
      <el-table-column prop="deptId" label="科室编号"></el-table-column>
      <el-table-column prop="deptName" label="科室名称" />
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <span :style="{color: scope.row.status === 1 ? '#67C23A' : '#F56C6C'}">
            {{ scope.row.status === 1 ? '启用' : '禁用' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.createdAt ? scope.row.createdAt.substr(0, 19) : '' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      style="margin-top: 20px; text-align: right"
      background
      layout="prev, pager, next, jumper"
      :total="total"
      :page-size="searchForm.pageSize"
      :current-page="searchForm.pageNum"
      @current-change="handlePageChange"
    ></el-pagination>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        campusId: '',
        categoryId: '',
        deptName: '',
        status: '',
        dateRange: []
      },
      campusList: [],    // 一级科室下拉
      categoryList: [],  // 二级科室下拉
      tableData: [],
      total: 0,
      categoryMap: {
        1: '一级',
        2: '二级',
        3: '三级'
        // 你可以根据实际类型补充
      },
      weekMap: {
        1: '周一',
        2: '周二',
        3: '周三',
        4: '周四',
        5: '周五',
        6: '周六',
        7: '周日'
      }
    };
  },
  created() {
    console.log('DepartmentManage created');
    this.fetchCampusList();
    this.fetchCategoryList();
    this.fetchList();
    axios.get('/category/list').then(res => {
      // 假设返回 [{id: 1, name: '一级'}, ...]
      this.categoryMap = {};
      res.data.forEach(item => {
        this.categoryMap[item.id] = item.name;
      });
    });
  },
  methods: {
    // 获取一级科室下拉
    fetchCampusList() {
      // 假设接口 /campuses/list 返回所有院区
      axios.get('/campuses/list', { params: { pageNum: 1, pageSize: 100 } }).then(res => {
        this.campusList = res.data.records || [];
      });
    },
    // 获取二级科室下拉
    fetchCategoryList() {
      // 假设接口 /departments/tree 返回所有科室类型
      axios.get('/departments/tree').then(res => {
        this.categoryList = res.data || [];
      });
    },
    // 获取科室列表（树形结构）
    fetchList() {
      console.log('fetchList called');
      axios.get('/departments/list', {
        params: {
          pageNum: this.searchForm.pageNum,
          pageSize: this.searchForm.pageSize,
          campusId: this.searchForm.campusId,
          categoryId: this.searchForm.categoryId,
          deptName: this.searchForm.deptName,
          status: this.searchForm.status,
          startTime: this.searchForm.dateRange[0] || '',
          endTime: this.searchForm.dateRange[1] || ''
        }
      }).then(res => {
        // 假设后端返回 { records: [...], total: 100 }
        if (res.data && res.data.records) {
          this.tableData = res.data.records;
          this.total = res.data.total;
          console.log('tableData', this.tableData);
        } else {
          this.tableData = [];
          this.total = 0;
        }
      });
    },
    handlePageChange(page) {
      this.searchForm.pageNum = page;
      this.fetchList();
    },
    handleAdd() {
      this.$message.info('点击了新增');
    },
    handleEdit(row) {
      this.$message.info('点击了编辑: ' + row.deptName);
    }
  }
};
</script>

<style scoped>
.filter-form {
  margin-bottom: 20px;
}
</style>